<!DOCTYPE html><!--[if IE 8]><html class='ie8'><![endif]-->
<!--[if IE 9]><html class='ie9'><![endif]-->
<!--[if I!E]><!--><html><!--<![endif]-->
<head>
  <meta chartset="utf8">
  <title>jade study</title>
</head>
<body>
  <p>desc from layout</p>
  <h2>jade api</h2>
  <p style="word-break:break-all">
    1.  &nbsp; jade.compile(source,options)  <br/>
    2.	&nbsp; jade.compleFile(path,options) <br/>
    3.	&nbsp; jade.compleClient(source,options)<br/>
    4.	&nbsp; jade.render(source,options) <br/>
    5.	&nbsp; jade.renderFile(filename,options) <br/>
  </p>
  <h2>导入</h2>
  <style>
    h3{
    	color: #555
    }
  </style>
  <style>
    h2{
    	color:#000
    }
  </style><div>
	<h3>content from html</h3>
</div>
  <h2>模板继承</h2>
  <h2>mixin 复用代码块1</h2>
  <h3>mixin </h3>
    <p>imooc jade study</p>
  <h3>mixin 传参</h3>
    <p>scott study</p>
    <ul class="course">
      <li>jade</li>
      <li>node</li>
      <li>java</li>
    </ul>
  <h3>mixin 嵌套</h3>
    <h4>dengwobo</h4>
      <p>dengwobo study</p>
      <ul class="course">
        <li>java</li>
        <li>node</li>
        <li>jade</li>
      </ul>
  <h3>mixin 内联代码块</h3>
    <h4>slogon</h4>
    <p>Good job!</p>
  <h3>mixin 属性传递</h3>
    <p class="magic">attr</p>
  <h3>mixin 属性传递 多属性传递</h3>
    <p id="attrid" class="magic2">attrs</p>
  <h3>mixin 多参数传递</h3>
    <ul class="magic"></ul>
    <li>java</li>
    <li>node</li>
    <li>express</li>
  <h2>流程 '-' 可选</h2>
  <h3>if else</h3>
  <p>jade, node, express</p>
  <h3>unless 翻转条件 双重否定</h3>
  <p>3</p>
  <h3>case</h3>
  <p>Hi jade!</p>
  <h3>for each</h3>
  <p>jade</p>
  <p>high</p>
  <h3>each</h3>
  <p>course: jade</p>
  <p>level: high</p>
  <h3>遍历数组</h3>
  <p>node</p>
  <p>jade</p>
  <p>express</p>
  <h3>嵌套循环</h3>
  <dl>
    <dt>1</dt>
    <dd>a</dd>
    <dd>b</dd>
    <dt>2</dt>
    <dd>c</dd>
    <dd>d</dd>
  </dl>
  <h3>while</h3>
  <ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <style>
    body {color: #ff6600}
    
  </style>
  <script type="text/javascript">
    var imoocCourse='jade';	
    
    
  </script>
  <h2>转义 安全转义 和非安全转义</h2>
  <p>text</p>
  <p>&lt;script&gt; alert(1); &lt;/script&gt; &lt;span&gt;script&lt;/span&gt;</p>
  <p>text</p>
  <p>&lt;script&gt; alert(1); &lt;/script&gt; &lt;span&gt;script&lt;/span&gt;</p>
  <!-- p !{htmlData}-->
  <!-- p!= htmlData-->
  <p>#{htmlData}</p>
  <p>!{htmlData}</p>
  <input value="undefined">
  <input>
  <h2>声明变量和替换数据</h2>
  <div><a>JADE</a>
    <h2>文档声明和头尾标签</h2>
    <h2>标签语法</h2>
    <section>
      <div>
        <ul></ul>
        <p></p>
      </div>
    </section>
    <h2>元素属性</h2>
    <div id="id" class="class1 class2"></div>
    <div id="id" class="class1 class2"><a href="http://imooc.com" target="_blank"></a></div>
    <h2>元素文本</h2>
    <p>
      1. aa 
      <strong>11</strong>
      2. bb 
      <span>22</span>
      3. cc 
      4. dd
    </p>
    <p>
       1. aa <strong>11</strong>
       2. bb <span>22</span>
       3. cc 
       4. dd
    </p>
    <h2>注释</h2>
    <h3>单行注释</h3>
    <!--h1 imooc jade study-->
    <h3>非缓冲注释</h3><a href="http://imooc.com" title="imooc jade study" data-uid="1000">link</a>
    <input name="course" type="text" value="jade">
    <input name="type" type="checkbok" checked>
    <h4>块注释</h4>
  </div>
  <p>
    1. aa 
    <strong>11</strong>
    2. bb 
    <span>22</span>
    3. cc 
    4. dd
  </p>
</body></html>